<template>
  <div class="rankingList">

    <div id="rankingList" style="width: 100%;height: 90%;"></div>
  </div>

</template>

<script>
  import echarts from 'echarts'
  export default {
    data(){
      return {
        echartsNames:["摩拜","OFO"],
        perHourData:[[30,10],[25,20]],
        perHour:["2019-06","2019-07"],
        //---echarts
        titleEcharts:["骑行车辆订单数","数量(单)"],
        seriesDispose: [],
        rankingList:[],
      }
    },
    created(){
      this.axios.post(process.env.API_HOST + '/statis/selectOnlineVehicleSum', {"parentId": 0,"regionType": 0})
        .then(response => {
          const result = response.data?response.data:[]
          let arr=[]
          if (result.code === 200 && result.result) {
            this.rankingList = result.result.rankingList ? result.result.rankingList : []
            this.rankingList.forEach(item=>{
              arr.push({label: item.regionName, value: item.onlineVehicleTotal})
            })
          }
          this.initData(arr)
        })
    },
    mounted(){

    },
    methods: {
      initData(serdata) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.echarts.init(document.getElementById('rankingList'));
        let data = serdata
        let option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter: function (params) {
              const param = params[0];
              const marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#e6b600;"></span>';
              const suffix = '<span style="margin-left:5px;font-size:12px;">辆</span>';
              return param.name + "<br />" +
//                marker + "排名：" + (param.dataIndex+1) + "<br />" +
                marker + "数量：" + param.value + suffix;
            }
          },
          grid: {
            top: 5,
            bottom: 10,
            left: 75,
            right: 40
          },
          xAxis: {
            show: false,
            type: "value"
          },
          yAxis: {
            type: "category",
            inverse: true,
            axisLine: {show: false},
            axisTick: {show: false},
            axisLabel: {
              fontSize: 12,
              color: "gray"
            }
          },
          series: [{
            name: "单车企业",
            type: "bar",
            barCategoryGap: "60%",
            label: {
              show: true,
              position: "right",
              fontSize: 12,
              color: "#3975FE",
              emphasis: {
                color: "#e6b600"
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {

                  // build a color map as your need.

                  var colorList = ['#F08228','#EFEE13','#4E99FF','#4164E9','#7C53D5',];

                  return colorList[params.dataIndex]

                },
                /*color: new echarts.graphic.LinearGradient(
                  0, 1, 1, 1,
                  [
                    {offset: 0, color: '#b0c2f9'},
                    {offset: 0.5, color: '#188df0'},
                    {offset: 1, color: '#185bff'}
                  ]
                )*/
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(
                  0, 1, 1, 1,
                  [
                    {offset: 0, color: '#b0c2f9'},
                    {offset: 0.7, color: '#e6b600'},
                    {offset: 1, color: '#ceac09'}
                  ]
                )
              }
            }
          }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        const xData = [];
        const yData = [];
        for (let i in data) {
          xData.push(data[i].value);
          yData.push(data[i].label);
        }
        myChart.setOption({
          yAxis: {
            data: yData
          },
          series: [{
            name: "市价总值排行",
            data: xData
          }]
        });
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
    },
    watch: {

    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .rankingList
    padding 10px
    width: 100%
    height 100%;
    box-sizing border-box
    border-radius 15px
    display: flex
    justify-content: center

</style>
